<template>
  <div class="root">
    <!--左边部分-->
    <div class="left-content">
      <div class="title">
        <div class="title-m">广告数据分析</div>
        <div class="title-s">广告投放数据分析</div>
      </div>
      <div class="month-c">
        <div class="month-c-title">本月</div>
        <div class="month-c-item">
          {{ `小区广告数量：${analyzeData.length > 0 ? analyzeData[analyzeData.length - 1].advertCount : 0}条` }}
        </div>
        <div class="month-c-item">
          {{ `浏览数量：${analyzeData.length > 0 ? analyzeData[analyzeData.length - 1].browseAdvertCount : 0}次` }}
        </div>
        <el-divider></el-divider>
      </div>
      <div class="month-u">
        <div class="month-u-title">上月</div>
        <div class="month-u-item">
          {{ `小区广告数量：${analyzeData.length>0 ? analyzeData[analyzeData.length - 2].advertCount : 0}条` }}
        </div>
        <div class="month-u-item">
          {{ `浏览数量：${analyzeData.length>0 ? analyzeData[analyzeData.length - 2].browseAdvertCount : 0}次` }}
        </div>
      </div>
      <img class="dit" src="~@/assets/images/dit.png" alt=""/>
    </div>
    <!--/左边部分-->
    <!--右边部分-->
    <div class="right-content">
      <div :id="id" class="chart-box"/>
    </div>
    <!--/右边部分-->
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { mapState } from 'vuex'

export default {
  name: 'ReportChart',
  components: {},
  props: {
    id: {
      type: String,
      default: 'report-chart'
    },
    analyzeData: {
      type: Array,
      require: true,
      default: () => []

    }
  },
  data() {
    return {}
  },
  created() {
  },
  mounted() {
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', () => {
      this.chart.resize()
    })
    this.chart.dispose()
    this.chart = null
  },
  computed: {
    ...mapState('app', ['sidebar']),
    chartData() {
      // return []
      return [this.analyzeData.map(item => item.dateTime), this.analyzeData.map(item => item.advertCount), this.analyzeData.map(item => item.browseAdvertCount)]
    }
  },
  watch: {
    'sidebar.opened': function(val, oldVal) {
      setTimeout(() => {
        this.chart.resize()
      }, 300)
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption({
        grid: {
          left: '7%',
          bottom: '6%',
          width: '92%',
          height: '75%'
        },
        legend: [
          {
            right: '0%',
            top: '0%',
            icon: 'rect',
            itemWidth: 8,
            itemHeight: 8,
            textStyle: {
              color: '#35A0FC'
            },
            data: ['小区广告数量', '广告浏览数']
          }
        ],
        xAxis: {
          type: 'category',
          data: this.chartData[0],
          axisLine: {
            lineStyle: {
              color: '#006EFF',
              width: 2
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              width: 12,
              type: 'solid',
              color: '#006EFF',
              opacity: 0.1
            },
            z: 1
          }
        },
        series: [
          {
            name: '小区广告数量',
            showSymbol: false,
            data: this.chartData[1],
            type: 'line',
            smooth: true,
            lineStyle: {
              color: '#006EFF',
              width: 3,
              shadowColor: '#006EFF',
              shadowBlur: 10,
              shadowOffsetY: 8,
              opacity: 0.5
            }
          },
          {
            name: '广告浏览数',
            showSymbol: false,
            data: this.chartData[2],
            type: 'line',
            smooth: true,
            lineStyle: {
              color: '#61DDAA',
              width: 3,
              shadowColor: '#61DDAA',
              shadowBlur: 10,
              shadowOffsetY: 8,
              opacity: 0.5
            }
          }
        ]
      })
      window.addEventListener('resize', () => {
        if (this.chart) {
          this.chart.resize()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.root {
  display: flex;
  padding: 22px;
  width: 75.6%;
  height: 470px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 2px 4px 0px rgb(191 191 191 / 75%);

  .left-content {
    height: 100%;

    .title {
      .title-m {
        font-size: 18px;
        font-weight: bold;
      }

      .title-s {
        margin-top: 3px;
        font-size: 14px;
        color: #666666;
        padding: 0 0 0 10px;
        border-left: 3px solid #006eff;
        //letter-spacing: 2px;
      }
    }

    .month-c {
      margin-top: 20px;
      padding: 18px 12px;
      width: 190px;
      height: 110px;
      font-size: 14px;
      background: url("~@/assets/images/ggsjbj1.png") no-repeat center center;
      background-size: contain;

      .month-c-title {
        display: inline-block;
        padding: 3px 9px;
        border-radius: 10px;
        background-color: #fff;
        color: #006eff;
      }

      .month-c-item {
        margin-top: 12px;
        color: #ffffff;
      }
    }

    .month-u {
      margin-top: 20px;
      padding: 0 0 0 10px;
      font-size: 14px;

      .month-u-title {
        display: inline-block;
        padding: 3px 9px;
        border-radius: 10px;
        background-color: #e4f2ff;
        color: #006eff;
      }

      .month-u-item {
        margin-top: 12px;
        //color: #FFFFFF;
      }
    }

    .dit {
      width: 271px;
      height: 166px;
      margin: -5px 0 0 -15px;
    }
  }

  .right-content {
    width: 100%;
    height: 100%;

    .chart-box {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
